<!-- 组件 -->
<template>
  <div class="skin-select">
    <sketch-picker class="skin-color-sketch" :value="defaultColor" @input="updateColorValue"></sketch-picker>
    <p @click="saveBackgroundColor" class="save-color-button">确 定</p>
  </div>
</template>

<script>
import { Sketch } from 'vue-color';
export default {
  name: '',
  model: {
    prop: 'defaultColor',
    event: 'updateColorValue',
  },
  props: {
    defaultColor: {
      type: String | Object,
      default: '#000',
    },
  },
  data() {
    return {};
  },
  components: { 'sketch-picker': Sketch },
  methods: {
    updateColorValue(e) {
      this.$emit('updateColorValue', e.rgba);
    },
    saveBackgroundColor() {
      this.$emit('saveBackgroundColor');
    },
  },
};
</script>
<style scoped>
.skin-select {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 10px;
}
.skin-color-sketch {
  padding-top: 0;
  box-sizing: border-box;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
  width: 100%;
}
.save-color-button {
  align-self: flex-end;
  margin: 10px;
  color: #fff;
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 6px;
  color: red;
  border: 1px solid #ccc;
}
.save-color-button:hover {
  color: #fff !important;
  background: red !important;
  border: 1px solid red;
}
</style>
